<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse value="0">
          <Panel>
            文本样式
            <div slot="content">
              <Form :label-width="105">

                <FormItem label="字体颜色">
                  <PnColorPicker size="small" v-model="color" alpha recommend/>
                </FormItem>
                <FormItemPanel title="渐变色" v-if="gradient">
                  <FormItem label="开启">
                    <i-switch v-model="gradient.open">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="渐变角度">
                    <Tooltip content="只在不开启渐变动画的前提下生效" placement="left">
                      <InputNumber size="small" :max="360" :min="0" v-model="gradient.angle"></InputNumber>
                    </Tooltip>
                  </FormItem>
                  <FormItem label="起始颜色">
                    <PnColorPicker size="small" v-model="gradient.startColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="结束颜色">
                    <PnColorPicker size="small" v-model="gradient.endColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="渐变动画">
                    <i-switch v-model="gradient.animation">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                </FormItemPanel>
                <FormItem label="字体大小">
                  <InputNumber size="small" :max="1000" :min="1" v-model="fontSize"></InputNumber> px
                </FormItem>

                <FormItem label="字体粗细">
                  <Select transfer size="small" v-model="fontWeight">
                    <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="行高">
                  <InputNumber size="small" :max="1000" :min="1" v-model="lineHeight"></InputNumber> px
                </FormItem>
                <FormItem label="对齐方式">
                  <Select transfer size="small" v-model="textAlign">
                    <Option v-for="item in $PnDict.textAligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="首行缩进">
                  <InputNumber size="small" :max="1000" :min="1" v-model="textIndent"></InputNumber> px
                </FormItem>
                <FormItem label="滚动条">
                  <Select transfer size="small" v-model="overflow">
                    <Option v-for="item in $PnDict.overflows" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="透明度">
                  <InputNumber size="small" :max="1" :min="0.1" :step="0.1" v-model="opacity"></InputNumber>
                </FormItem>

                <FormItem label="悬浮文本">
                  <Input size="small" v-model="title"/>
                </FormItem>

                <!--<FormItemPanel title="自定义样式">
                  <CodeEditor v-model="customStyleCode" mode="css"></CodeEditor>
                </FormItemPanel>-->

              </Form>
            </div>
          </Panel>
          <Panel>
            文本滚动
            <div slot="content">
              <Form :label-width="105" v-if="marquee">
                <FormItem label="开启滚动">
                  <i-switch v-model="marquee.open">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="向上滚动">
                  <i-switch v-model="marquee.reverse">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="文本重复">
                  <i-switch v-model="marquee.repeat">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="重复间距">
                  <InputNumber size="small" :max="1000" :min="0" v-model="marquee.repeatMargin"></InputNumber>
                </FormItem>
                <FormItem label="滚动速度">
                  <Tooltip content="数值越大，滚动速度越快" placement="left">
                    <InputNumber size="small" :max="1000" :min="10" v-model="marquee.speed.number"></InputNumber>
                  </Tooltip>
                </FormItem>
                <FormItem label="鼠标滑入暂停">
                  <i-switch v-model="marquee.hoverPause">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
              </Form>
              <Alert show-icon style="padding-right: 10px;" v-else>当前版本不支持文本滚动，请升级组件</Alert>
            </div>
          </Panel>
        </Collapse>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="PlainTextComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">

          <InteractionReceive></InteractionReceive>

          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';
  import FormItemPanel from "@/components/common/FormItemPanel";

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'PlainTextCompForm',
    components: {FormItemPanel},
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        text: 'component.compConfigData.text',
        title: 'component.compConfigData.title',

        backgroundColor: 'component.compConfigData.backgroundColor',

        fontSize: 'component.compConfigData.fontSize',
        color: 'component.compConfigData.color',
        fontWeight: 'component.compConfigData.fontWeight',
        lineHeight: 'component.compConfigData.lineHeight',
        textAlign: 'component.compConfigData.textAlign',
        textIndent: 'component.compConfigData.textIndent',
        overflow: 'component.compConfigData.overflow',
        opacity: 'component.compConfigData.opacity',

        customStyleCode: 'component.compConfigData.customStyleCode',

        gradient: 'component.compConfigData.gradient',
        marquee: 'component.compConfigData.marquee'
      })
    }
  }
</script>

<style scoped>

</style>
